<template>
  <view class="paper-list-container">
    <view class="skeletons-box">
      <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
    </view>
    <view class="paper-list-box" v-show="!loading">
      <template v-for="(item) in paperList" :key="item._id">
        <navigator :url="`/subpkg/preview_img/preview_img?id=${item._id}`" class="paper-item">
          <image class="paper" :src="item.smallPicurl" mode="aspectFill"></image>
        </navigator>
      </template>
    </view>
    <view class="no-more-box" v-if="noData">
      <uni-load-more status="noMore"></uni-load-more>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad,
    onReachBottom,
    onPullDownRefresh,
    onUnload,
    onShareAppMessage,
    onShareTimeline,
  } from '@dcloudio/uni-app';
  import http from '@/api/index.js'
  import {
    showMsg
  } from '../../utlis/interact';
  import {
    ref
  } from 'vue';
  // 非响应式数据
  const queryObj = {
    classid: '',
    pageNum: 1,
    pageSize: 9
  }
  let total = 0;
  let isLoading = false;
  let name;

  // 响应式数据
  const paperList = ref([]);
  const loading = ref(true);
  const noData = ref(false);
  const skeleton = ref([{
    type: 'flex',
    children: [{
        type: 'line',
        num: 3,
        gap: '10rpx',
        style: 'height:33vh',
      },
      {
        type: 'line',
        num: 3,
        gap: '10rpx',
        style: 'height:33vh;margin:0 5rpx;'
      },
      {
        type: 'line',
        num: 3,
        style: 'height:33vh',
        gap: '10rpx',
      },
    ],
  }])

  //生命周期
  onLoad((options) => {
    queryObj.classid = options.id;
    name = options.name;
    /* 
    生成一个对象，他有两个属性：'score','download',值分别为我的评分，我的下载
    */
    const type = {
      'score': '我的评分',
      'download': '我的下载',
    }
    for (let key in type) {
      if (type[key] === name) {
        getScoreList(key);
      }
    }
    uni.setNavigationBarTitle({
      title: options.name,
    })
    getPaperListById();
  });
  // 页面被卸载时
  onUnload(() => {
    uni.removeStorageSync('paperlist');
  })
  // 网络请求
  // 1. 获取壁纸列表
  async function getPaperListById(cb) {
    isLoading = true;
    const res = await http('api/bizhi/wallList', queryObj);
    isLoading = false;
    cb && cb();
    loading.value = false;
    if (res.errCode !== 0) return showMsg();
    paperList.value = [...paperList.value, ...res.data];
    if (paperList.value.length === 0) noData.value = true;
    // url不适合传数组对象等比较大的数据，适合传id,name等一个个字段；若要传数组，可以先存在本地缓存，用的时候从本地缓存中获取
    uni.setStorageSync('paperlist', JSON.stringify(paperList.value));
    total = res.total
  }
  // 2. 获取我的下载和评分数据
  async function getScoreList(type) {
    const res = await http('api/bizhi/userWallList', {
      type
    });
    if (res.errCode !== 0) return showMsg();
    paperList.value = res.data;
  }
  // 事件回调
  // 触底加载更多
  onReachBottom(() => {
    if (queryObj.pageNum * queryObj.pageSize >= total) return showMsg('数据加载完毕');

    if (isLoading) return showMsg('请稍后重试');

    queryObj.pageNum++;
    loading.value = true;
    getPaperListById();

  });

  // 下拉刷新
  onPullDownRefresh(() => {
    paperList.value = [];
    queryObj.pageNum = 1;
    total = 0;
    isLoading = false;

    getPaperListById(() => uni.stopPullDownRefresh())
  })

  // 分享好友功能
  onShareAppMessage(() => {
    return {
      title: '精选分类-' + name,
      path: '/subpkg/papers_list/papers_list?id=' + queryObj.classid + '&name=' + name
    }
  });
  // 转发朋友圈功能
  onShareTimeline(() => {
    return {
      title: '精选壁纸-' + name,
      query: 'id=' + queryObj.classid + '&name=' + name,
      imageUrl: '/static/avatar.jpeg'
    }
  })
</script>

<style lang="scss" scoped>
  .paper-list-container {
    .skeletons-box {
      padding: 10rpx;
    }

    .no-more-box {
      padding: 30rpx 0;
    }
  }
</style>